<template>
      <div style="padding: 10px">
        <div style="margin: 10px">
          <el-input v-model="page.param.stu_name" placeholder="请输入学生姓名" style="width: 20%" clearable></el-input>
          <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
          <el-button type="info" style="margin-left: 5px" @click="reset">重置</el-button>
          <el-button type="warning" style="padding-right:10px" @click="add">新增</el-button>
        </div>
          <div style="margin-left: 10px">
        <el-table :data="state.tableData" border stripe style="width: 90%" :header-cell-style="{
      background:'#b1b3b8',height:'50px',color:'#000000',border: '1px solid tan'}">
          <el-table-column prop="stuId" label="ID" width="100" align="center" />
          <el-table-column prop="stuName" label="姓名" width="150" align="center" />
          <el-table-column prop="stuPhone" label="电话号码" width="AUTO" align="center" />
          <el-table-column prop="teamId" label="队伍ID" width="150" align="center" />
          <el-table-column prop="scId" label="学校ID" width="150" align="center" />
          <el-table-column prop="stuRecode" label="学生分数" width="150" align="center" />
          <el-table-column label="操作" align="center" width="200">
            <template #default="scope">
              <el-button  type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.stuId)">
                <template #reference>
                  <el-button  type="danger" >删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
          </div>
        <div style="margin: 10px">
          <el-pagination
              background
              v-model:current-page="page.pageNum"
              v-model:page-size="page.pageSize"
              :page-sizes="[5, 10, 15]"
              large
              :disabled="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="state.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
        <el-dialog v-model="dialogVisible" title="学生信息" width="30%">
          <el-form label-width="120px" :model="state.form" :rules="state.rules" ref="rulesFormRef">
            <el-form-item label="学生电话" prop="stuPhone" >
              <el-input v-model="state.form.stuPhone" placeholder="请输入学生电话" style="width: 80%" />
            </el-form-item>
            <el-form-item label="学生姓名" prop="stuName">
              <el-input v-model="state.form.stuName" placeholder="请输入学生姓名" style="width: 80%" />
            </el-form-item>
            <el-form-item label="所在团队ID" prop="teamId">
              <el-input v-model="state.form.teamId" placeholder="请输入学生所在团队ID" style="width: 80%" />
            </el-form-item>
            <el-form-item label="所在学校ID" prop="scId">
              <el-input v-model="state.form.scId" placeholder="请输入所在学校ID" style="width: 80%" />
            </el-form-item>
            <el-form-item label="学生分数" prop="stuRecode">
              <el-input v-model="state.form.stuRecode" placeholder="请输入学生分数" style="width: 80%" />
            </el-form-item>
            <el-form-item label="学生密码">
              <el-input v-model="state.form.stuPwd" placeholder="123456" disabled style="width: 80%" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="save">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </template>

<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
import request from "@/request";
import {ElMessage, ElNotification} from "element-plus";
const { proxy }=getCurrentInstance()

const load = () => {
  request.post('/student/listPage',JSON.stringify(page)).then(res=>{
    if(res.code===200) {
      state.tableData = res.data
      state.total=res.total
    }
  })
}

const page=reactive({
  pageNum:ref(1),
  pageSize:ref(10),
  param:{
    stu_name:ref()
  }
})
//刷新页面
load()
//页数
const handleSizeChange=(val)=>{
  page.pageSize=val
  load()
}
//每页数量
const handleCurrentChange=(val)=>{
  page.pageNum=val
  load()
}

const reset=()=>{
      page.param.stu_name="";
      load()
}
const dialogVisible=ref(false)
const add=()=>{
    dialogVisible.value=true;
    state.form={
      stuPwd:"123456"
    } //清空数据，并设置初始密码为123456

}
const handleEdit=(row)=>{

  state.form=JSON.parse(JSON.stringify(row))

  dialogVisible.value=true;
}
const save=()=>{
  proxy.$refs.rulesFormRef.validate((valid)=>{
      if(valid){
        if(state.form.stuId){
          request.post('/student/update',JSON.stringify(state.form)).then(res=>{
            if(res.code===200){
              ElNotification({
                type:"success",
                message:"修改成功"
              })
              dialogVisible.value=false;
              load();
            }
          })
        }else {
          console.log(JSON.stringify(state.form))
          request.post('/student/save',JSON.stringify(state.form)).then(res=>{
            if(res.code===200){
              ElNotification({
                type:"success",
                message:"新增成功"
              })
              dialogVisible.value=false;
              load();
            }
          })
        }
      }else{
        ElMessage({
          type:"error",
          message:'请填写完整！'
        })
      }
  })
}

const handleDelete=(stuId)=>{
      request.get('/student/del',{params:{stu_id:stuId}}).then(res=>{
        if(res.code===200){
          ElNotification({
            type:"success",
            message:"删除成功"
          })
          load()
        }
      })
}

//数据
const state = reactive({
      tableData: [],
      total:0,
      form:{},
      rules:{
        stuPhone: [
          { required: true, message: '请输入学生电话', trigger: 'blur' },
        ],
        stuName: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' },
        ],
        teamId: [
          { required: true, message: '请输入学生所在团队ID', trigger: 'blur' },
        ],
        scId: [
          { required: true, message: '请输入所在学校ID', trigger: 'blur' },
        ],
        stuRecode: [
          { required: true, message: '请输入学生分数', trigger: 'blur' },
        ],
      }
    })

</script>

<style scoped>

</style>
